<template>
	<view class="container">
		<view class="iner">基本信息</view>
		<view class="othType">
			<view class="headerNumber">
				<view style="font-size: 24rpx;">出库类型</view>
				<view style="font-size: 26rpx;color: #999999 ;" >其他出库</view>
			</view>
			<view class="headerNumber">
				<view style="font-size: 24rpx;">货品</view>
				<view style="font-size: 26rpx;color: #999999 ;" @click="handeleSelect">{{list.oddNumbers?list.oddNumbers:'请选择出货商品'}}></view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;"></view>
		<view class="productStore">
			<view class="productHeader">
				<view style="display: flex;align-items: center;">
					<view>成品名称：</view>
					<view style="color: #999999 ;">暂无数据</view>
				</view>
				<view class="blockOth" @click="handeleNewStore">
					<view class="imgBlock">
						<image  class="img" src="/static/work/cg_add01.png" mode=""></image>
					</view>
					<view class="addOth">增加货位</view>
				</view>
				
			</view>
			<!-- 选择库，选择货位 -->
			<view class="productSelect">
				<view style="margin-bottom: 25rpx;width: 100%;" v-for="(item,index) in list.products" :key="index">
					<!-- 仓库关联 -->
					<view class="productTop" style="margin-bottom: 15rpx;">
						<view class="blocks1" @click="handeleStore(index)">
							<view v-if="item.productName">{{item.productName}}</view>
							<view v-else style="color: #999999;">请选择仓库货位</view>
							<image style="width: 16rpx;height: 12rpx;" src="/static/work/cg_fl_02.png" mode=""></image>
						</view>
						<view class="blocks" style="margin-right: 10rpx;">
							<input v-model="item.productSum" style="font-size: 24rpx;"
								placeholder-style="font-size:24rpx" type="number" placeholder="请输入件数">
							
						</view>
						<view class="imgBlock" @click="handeleNewStoreReduct" v-if="list.products.length>1">
							<image class="img" src="/static/work/cg_add04.png" mode=""></image>
						</view>
					</view>

				</view>
			</view>

			<view class="submit">
				<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1" @click="submit">确认出库</u-button>
			</view>
		</view>

		
		<!-- 生产单号 -->
		<u-picker :show="oddShow" :columns="oddNumbers" keyName="value" @cancel="handeleCancel" @confirm="handeleConfirm"></u-picker>
		
		<Warehouse @setValueName="handleSetValueName"  ref="warehouseRef"/>
	</view>
</template>

<script>
	import Warehouse from '@/components/Warehouse.vue'
	
	export default {
		components:{
			Warehouse
		},
		data() {
			return {
				oddShow:false, //生产单号选择弹窗
				oddNumbers:[ //测试的生产单号
					[{
					    value: 'SC-20250202-001',
					    id: 2021
					}, {
					    value: 'SC-20250202-002',
					    id: 2022
					},
					]
				],//生产单号数据
				disabled:true,//按钮
				loading: false,//按钮
				show: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				
				list: { //成品信息
					oddNumbers: '', //生产单号
					oddId: '', //生产id
					products: [{
						productId: '', //仓库ID
						productName: '',//名称
						productSum: '',//数量
					}]
				},
				indexStore: 0, //选中仓库的下标
				
			}
		},
		onLoad() {
		},
		methods: {
			// 获取数据
			getData() {
				
			},
			// 提交
			submit() {
				let bol = false
				for (const item of this.list.products) {
				    if (!item.productName||!item.productSum) {
						bol=true
				        break; // 找到目标，终止循环
				    }
				}
				if(bol){
					uni.showToast({
						title:'请完善信息',
						icon:'none'
					})
					return
				}
				this.loading = true
				setTimeout(()=>{
					this.loading = false
				},2000)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			
			// 选择仓库
			handeleStore(index) {
				this.$refs.warehouseRef.handleIsShow([],false)
			},
			// 减仓库
			handeleNewStoreReduct(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此货位？',
					success: res => {
						if (res.confirm) {
							this.list.products.splice(index, 1)
						}
					}
				});
			},
			// 新增仓库选项
			handeleNewStore() {
				let obj = {
					productName: '',
					productSum: '',
					locations: [{
						locationName: '',
						locationSum: ''
					}]
				}
				this.list.products.push(obj)
			},
			// 点击选择生产单号
			handeleSelect(){
				this.oddShow = true
			},
			// Picker选择生产单号确定
			handeleConfirm(e){
				this.disabled = false
				this.list.oddNumbers = e.value[0].value
				this.list.oddId = e.value[0].id
				this.oddShow = false
			},
			// Picker选择生产单号取消
			handeleCancel(){
				this.oddShow = false
			},
			// 选择仓库返回的数据
			handleSetValueName(val){
				console.log('测试选择仓库返回的数据');
			}
		}
	}
</script>

<style scoped>
	.blockOth{
		display: flex;
		align-items: center;
	}
	.addOth{
		font-size: 24rpx;
		color: #177A77 ;
		margin-left: 5rpx;
	}
	.othType{
		width: 750rpx;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;
	}
	.submit {
		width: 100%;
		position: relative;
		margin-top: 69rpx;
		margin-bottom: 100rpx;
	}

	.imgBlock {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blocks1 {
		flex: 1;
		height: 60rpx;
		background-color: aqua;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		margin-right: 20rpx;
		background: #FFFFFF;
		border: 1rpx solid #EBEBEB;
		padding: 18rpx 21rpx;
		box-sizing: border-box;
	}

	.blocks {
		flex: 1;
		height: 60rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		background: #FFFFFF;
		border: 1rpx solid #EBEBEB;
		padding: 18rpx 21rpx;
		box-sizing: border-box;
	}

	.productBottom {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.productTop {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.img {
		width: 28rpx;
		height: 28rpx;
		margin-bottom: -5rpx;
	}

	.productSelect {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 38rpx;
	}

	.productHeader {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.productStore {
		width: 750rpx;
		background-color: #FFFFFF;
		height: calc(100vh - 300rpx);
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		padding: 42rpx 29rpx 0 28rpx;
		box-sizing: border-box;
	}

	.headerNumber {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.iner {
		width: 750rpx;
		height: 59rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}

	page {
		background-color: #F8F8F8;
	}
</style>